<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            height: 200px;
            width: 200px;
            background-color: antiquewhite;
            transition-property: all;
            /*设置对象中的参与过渡的属性*/
            transition-duration: 3s;
            /*设置对象过渡的持续时间*/
            transition-timing-function: ease-in-out;
            /*设置对象中过渡的类型*/
            transition-delay: 1s;
            /*设置对象延迟过渡的时间*/
        }

        .div1:hover {
            /* translate()    平移，第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 */
            transform: translate(100px, 100px);
        }

        .div2 {
            height: 200px;
            width: 200px;
            background-color: rgb(226, 250, 215);
            transition: all 3s ease-in-out 1s;
            /*复合属性。设置对象变换时的过渡效果*/
        }

        .div2:hover {
            /* translateX()    指定对象X轴（水平方向）的平移 */
            /* translateY()    指定对象Y轴（垂直方向）的平移 */
            transform: translateX(100px);
        }

        .div3 {
            height: 200px;
            width: 200px;
            background-color: rgb(215, 250, 245);
            transition: all 3s ease-in-out;
            /* 以右下角为原点 */
            transform-origin: right bottom;
        }

        .div3:hover {
            /* rotate()    rotation旋转需先有 <' transform-origin '> 属性的定义 */
            /* rotateX()    指定对象在x轴上的旋转角度   
            rotateY()    指定对象在y轴上的旋转角度  
             rotateZ()    指定对象在z轴上的旋转角度 */
            transform: rotateY(180deg) rotateX(180deg);
        }

        .div4 {
            height: 200px;
            width: 200px;
            background-color: antiquewhite;
            transition: all 3s ease-in-out;
        }

        .div4:hover {
            /* scale()    scale缩放。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则取第一个参数的值 */
            transform: scale(1.5);
        }

        .div5 {
            height: 200px;
            width: 200px;
            background-color: rgb(250, 215, 231);
            transition: all 3s ease-in-out;
        }

        .div5:hover {
            transform: scale(0.5);
        }

        .div6 {
            height: 200px;
            width: 200px;
            background-color: rgb(218, 250, 215);
            transition: all 3s ease-in-out;
        }

        .div6:hover {
            /* scaleX()    指定对象X轴的（水平方向）缩放 */
            /* scaleY()    指定对象Y轴的（垂直方向）缩放 */
            transform: scaleX(0.5);
        }

        .div7 {
            height: 200px;
            width: 200px;
            background-color: rgb(215, 243, 250);
            transition: all 3s ease-in-out;
        }

        .div7:hover {
            /* skew斜切扭曲。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 */
            transform: skewX(100deg);
        }

        .div8 {
            height: 200px;
            width: 200px;
            background-color: rgb(250, 215, 215);
            transition: all 3s ease-in-out;
        }

        .div8:hover {
            /* skewX()    指定对象X轴的（水平方向）扭曲 */
            /* skewY()    指定对象Y轴的（垂直方向）扭曲  */
            transform: skewY(100deg);
        }

        /* 3D空间 */
        .views {
            width: 250px;
            height: 250px;
            margin: 0 auto;
            position: relative;
            perspective: 1000px;
            /* 设置3D效果的距离 近大远小 */
        }

        /* 3D的立体元素 */
        .box {
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            /* 将元素以3D的效果显示 */
            transform: rotateX(-15deg) rotateY(20deg);
            /* 稍微的转换一下角度，看到不同的层面 */
            transition: all ease-in-out .3s;
        }

        /* 6个面 */
        .face {
            width: 100%;
            height: 100%;
            line-height: 250px;
            font-size: 2em;
            font-weight: bold;
            text-align: center;
            background-color: rgba(51, 51, 51, .1);
            border: 1px solid #fff;
            position: absolute;
            left: 0;
            top: 0;
            box-shadow: 0px 0px 20px 0px #333;
            color: #fff;
            opacity: .6;
            transition: all ease-in-out .3s;
        }

        .front {
            transform: translate3d(0px, 0px, 125px);
        }

        .back {
            transform: rotateY(180deg) translate3d(0px, 0px, 125px);
        }

        .left {
            transform: rotateY(-90deg) translate3d(0px, 0px, 125px);
        }

        .right {
            transform: rotateY(90deg) translate3d(0px, 0px, 125px);
        }

        .top {
            transform: rotateX(90deg) translate3d(0px, 0px, 125px);
        }

        .bottom {
            transform: rotateX(-90deg) translate3d(0px, 0px, 125px);
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="div6"></div>
    <div class="div7"></div>
    <div class="div8"></div>

    <div class="views">
        <!-- 3D元素 -->
        <div class="box">
            <div class="face front">正面</div>
            <div class="face back">背面</div>
            <div class="face left">左面</div>
            <div class="face right">右面</div>
            <div class="face top">上面</div>
            <div class="face bottom">下面</div>
        </div>
    </div>
</body>

</html>